<!-- light-blue - v3.3.0 - 2016-03-08 -->

<!DOCTYPE html>
<html>
<head>
    <title>Light Blue - Responsive Admin Dashboard Template</title>

        <link href="css/application.css" rel="stylesheet">
    <link rel="shortcut icon" href="img/favicon.png">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <meta charset="utf-8">
    <script>
        /* yeah we need this empty stylesheet here. It's cool chrome & chromium fix
           chrome fix https://code.google.com/p/chromium/issues/detail?id=167083
                      https://code.google.com/p/chromium/issues/detail?id=332189
        */
    </script>
</head>
<body>
        <div class="landing">
            <div class="container">
                <header class="page-header">
                    <div class="navbar">
                        <div class="logo pull-left">
                            <h4><a href="index.html">Light <strong>Blue</strong></a> <small>bootstrap 3 template</small></h4>
                        </div>
                        <ul class="nav navbar-nav pull-right navbar-menu hidden-xs">
                            <li class="active">
                                <a href="#">
                                    Home
                                </a>
                            </li>
                            <li>
                                <a href="#about">
                                    About
                                </a>
                            </li>
                        </ul>
                        <ul class="navbar-buttons pull-right">
                            <li>
                                <a href="index.html" class="btn btn-sm btn-transparent">
                                    Preview&nbsp;
                                    <i class="fa fa-arrow-right"></i>
                                </a>
                            </li>
                            <li>
                                <a href="https://wrapbootstrap.com/theme/light-blue-responsive-admin-template-WB0T41TX4"
                                   class="btn btn-sm btn-transparent">
                                    Download&nbsp;
                                    <i class="fa fa-download"></i>
                                </a>
                            </li>
                        </ul>
                    </div>
                </header>
                <div class="content">
                    <div id="carousel-landing" class="carousel slide carousel-landing carousel-fade">
                        <ol class="carousel-indicators">
                            <li data-target="#carousel-landing" data-slide-to="0" class="active"></li>
                            <li data-target="#carousel-landing" data-slide-to="1" class=""></li>
                            <li data-target="#carousel-landing" data-slide-to="2" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="animated fadeInLeftBig">
                                            <h1 class="slide-one-header"><strong>Light Blue</strong> <br>Dashboard Template</h1>
                                            <p class="lead hidden-xs">
                                                World <strong>First</strong> Transparent Dashboard
                                            </p>
                                            <p>
                                                <a href="index.html" class="btn btn-lg btn-white">
                                                    Preview &nbsp; <i class="fa fa-angle-right"></i>
                                                </a>
                                                <a href="https://wrapbootstrap.com/theme/light-blue-responsive-admin-template-WB0T41TX4"
                                                   class="btn btn-lg btn-transparent">
                                                    Purchase &nbsp; <i class="fa fa-shopping-cart"></i>
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="text-align-center animated fadeInRightBig">
                                            <img src="img/jpeg/light-blue-preview-1.png" alt="Second slide">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <h1 class="slide-two-header text-align-center animated fadeInDown">
                                    <strong>Transparent</strong> & <strong>White</strong>
                                    Versions
                                </h1>
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="animated fadeInLeftBig">
                                            <p>
                                                <a href="index.html">
                                                    <img src="img/jpeg/light-blue-laptop-transparent.png" alt=""/>
                                                </a>
                                            </p>
                                            <p class="text-align-center">
                                                <a href="index.html" class="btn btn-transparent btn-lg btn-version-preview">
                                                    Preview &nbsp; <i class="fa fa-angle-right"></i>
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <div class="animated fadeInRightBig">
                                            <p>
                                                <a href="../white/index.html">
                                                    <img src="img/jpeg/light-blue-laptop-white.png" alt=""/>
                                                </a>
                                            </p>
                                            <p class="text-align-center">
                                                <a href="../white/index.html" class="btn btn-white btn-lg btn-version-preview">
                                                    Preview &nbsp; <i class="fa fa-angle-right"></i>
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="item">
                                <div class="row">
                                    <div class="col-xs-6">
                                        <div class="animated fadeInLeft">
                                            <h1 class="slide-three-header">
                                                <strong>Fully</strong>
                                                <br>
                                                Responsive
                                            </h1>
                                            <p>
                                                <a href="http://www.responsinator.com/?url=demo.flatlogic.com%2F3.0" class="btn btn-white btn-lg" target="_blank">
                                                    Test It
                                                </a>
                                            </p>
                                        </div>
                                    </div>
                                    <div class="col-xs-6">
                                        <p class="animated fadeInUp" style="margin-top: 20px">
                                            <img src="img/jpeg/light-blue-phone.png" alt=""/>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <a class="left carousel-control carousel-control-landing" href="#carousel-landing" data-slide="prev">
                            <span class="icon-prev"></span>
                        </a>
                        <a class="right carousel-control carousel-control-landing" href="#carousel-landing" data-slide="next">
                            <span class="icon-next"></span>
                        </a>
                    </div>
                </div>
            </div>
            <div id="about" class="widget widget-white widget-about">
                <div class="container">
                    <div class="row">
                        <div class="col-sm-offset-1 col-sm-10">
                            <h2><strong>About Light Blue</strong></h2>
                            <p>
                                <strong>Light Blue</strong> - is a next generation dashboard template. Flat design and transparency - the
                                design that the world haven't seen before Light Blue.
                            </p>
                            <div class="row features">
                                <div class="col-sm-4">
                                    <section class="feature">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <p>
                                        <span class="icon background-danger">
                                            <i class="fa fa-bold"></i>
                                        </span>
                                                </p>
                                            </div>
                                            <div class="col-xs-8">
                                                <h4>Bootstrap 3</h4>
                                                <p>
                                                    Light Blue comes with built-in Twitter Bootstrap 3 support.
                                                    Easy to design your next web app.
                                                </p>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-4">
                                    <section class="feature">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <p>
                                        <span class="icon background-warning">
                                            <i class="fa fa-magic"></i>
                                        </span>
                                                </p>
                                            </div>
                                            <div class="col-xs-8">
                                                <h4>Unique design</h4>
                                                <p>
                                                    Transparent widgets and gradient background - have you seen something like this
                                                    before?
                                                </p>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-4">
                                    <section class="feature">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <p>
                                        <span class="icon background-success">
                                            <i class="fa fa-wrench"></i>
                                        </span>
                                                </p>
                                            </div>
                                            <div class="col-xs-8">
                                                <h4>Developer-friendly</h4>
                                                <p>
                                                    Simple, intuitive and easily maintainable code.
                                                </p>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                            <div class="row features">
                                <div class="col-sm-4">
                                    <section class="feature">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <p>
                                        <span class="icon background-primary">
                                            <i class="fa fa-superscript"></i>
                                        </span>
                                                </p>
                                            </div>
                                            <div class="col-xs-8">
                                                <h4>White & Transparent</h4>
                                                <p>
                                                    Two styles each having two background options.
                                                </p>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-4">
                                    <section class="feature">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <p>
                                        <span class="icon background-lime">
                                            <i class="fa fa-check"></i>
                                        </span>
                                                </p>
                                            </div>
                                            <div class="col-xs-8">
                                                <h4>Web applications</h4>
                                                <p>
                                                    LB itself is a web app. Plus there is an Email -
                                                    ready-to-use Backbone application.
                                                </p>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                                <div class="col-sm-4">
                                    <section class="feature">
                                        <div class="row">
                                            <div class="col-xs-4">
                                                <p>
                                        <span class="icon background-info">
                                            <i class="fa fa-css3"></i>
                                        </span>
                                                </p>
                                            </div>
                                            <div class="col-xs-8">
                                                <h4>Sass-powered</h4>
                                                <p>
                                                    Variables, mixins, includes - things that
                                                    make Light Blue really easy to customize.
                                                </p>
                                            </div>
                                        </div>
                                    </section>
                                </div>
                            </div>
                        </div>
                    </div>
                    <p class="preview text-align-center">
                        <a href="../white/index.html" class="btn btn-lg btn-danger">
                            &nbsp; Preview the White Version &nbsp;
                        </a>
                    </p>
                </div>
            </div>
            <h2 class="thanks text-align-center">Thanks for watching!</h2>
            <p class="lead text-align-center"><a class="back-to-top" href="#"> back to top <i class="fa fa-angle-up"></i></a></p>
        </div>
<!-- common libraries. required for every page-->
<script src="lib/jquery/dist/jquery.min.js"></script>
<script src="lib/jquery-pjax/jquery.pjax.js"></script>
<script src="lib/bootstrap-sass/assets/javascripts/bootstrap.min.js"></script>
<script src="lib/widgster/widgster.js"></script>
<script src="lib/underscore/underscore.js"></script>

<!-- common application js -->
<script src="js/app.js"></script>
<script src="js/settings.js"></script>

<!-- common templates -->
<script type="text/template" id="settings-template">
    <div class="setting clearfix">
        <div>Sidebar on the</div>
        <div id="sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% onRight = sidebar == 'right'%>
            <button type="button" data-value="left" class="btn btn-sm btn-default <%= onRight? '' : 'active' %>">Left</button>
            <button type="button" data-value="right" class="btn btn-sm btn-default <%= onRight? 'active' : '' %>">Right</button>
        </div>
    </div>
    <div class="setting clearfix">
        <div>Sidebar</div>
        <div id="display-sidebar-toggle" class="pull-left btn-group" data-toggle="buttons-radio">
            <% display = displaySidebar%>
            <button type="button" data-value="true" class="btn btn-sm btn-default <%= display? 'active' : '' %>">Show</button>
            <button type="button" data-value="false" class="btn btn-sm btn-default <%= display? '' : 'active' %>">Hide</button>
        </div>
    </div>
    <div class="setting clearfix">
        <div>Light Version</div>
        <div>
            <a href="../light/index.html" class="btn btn-sm btn-default">&nbsp; Switch &nbsp;   <i class="fa fa-angle-right"></i></a>
        </div>
    </div>
    <div class="setting clearfix">
        <div>White Version</div>
        <div>
            <a href="../white/index.html" class="btn btn-sm btn-default">&nbsp; Switch &nbsp;   <i class="fa fa-angle-right"></i></a>
        </div>
    </div>
</script>

<script type="text/template" id="sidebar-settings-template">
    <% auto = sidebarState == 'auto'%>
    <% if (auto) {%>
    <button type="button"
            data-value="icons"
            class="btn-icons btn btn-transparent btn-sm">Icons</button>
    <button type="button"
            data-value="auto"
            class="btn-auto btn btn-transparent btn-sm">Auto</button>
    <%} else {%>
    <button type="button"
            data-value="auto"
            class="btn btn-transparent btn-sm">Auto</button>
    <% } %>
</script>

    <!-- page specific scripts -->
        <script src="js/landing.js"></script>

</body>
</html>